<!--
- Author:  LiShibin.
- Date:    2018/9/17.
- File:    bankCard.
-->
<template>

    <div class="Web_Box">.
        <div class="Topmenu"><i @click="back" class="iconfont icon-youjiantou"><a href=""></a></i>
            <h1>我的开户行</h1>
            <span></span>
        </div>
        <div class="bank_choose">
            <ul>
                <li v-for="item in bankList.data">
                    <div class="bank_choose_img"> <img :src="$config.website + $config.adBrandImgSrc + item.logo_image" alt="" ></div>
                    <p class="bank_choose_name">{{item.bank_name}}</p>
                    <p class="bank_choose_num">{{item.member_bank_num}}</p>
                    <span class="bank_choose_lticon">
                         <i class="iconfont icon-lajitong" @click="delBank(item.mb_id)"></i>
                         <i class="iconfont icon-xiugaiyinhang" @click="editBank(item.mb_id)"></i>
                    </span>
                    <span @click="setDefaultBank(item.mb_id)" v-show="item.is_default == '0'" class="bank_choose_rt"><i class="iconfont icon-jiaobiao coe7"></i></span>
                    <span  v-show="item.is_default == '1'" class="bank_choose_rt"><i class="iconfont icon-jiaobiao"></i></span>

                </li>
            </ul>
            <div @click="gotoBankadd" data-router="member-bankadd" class="bank_add"><i class="iconfont icon-jiahao"></i>添加银行卡</div>
        </div>
    </div>

</template>

<script>
  import {MessageBox} from 'mint-ui'
  import {mapModules, mapRules} from 'vuet'

  export default{
    mixins: [
      mapModules({bankList: 'bankList'}),
      mapRules({need: 'bankList'})
    ],
    data() {
      return {
        from: this.$route.query.from || ''
      }
    },
    components: {},
    created() {
    },
    methods: {
      back() {
        this.$router.go(-1)
      },
      setDefaultBank(id) {
        this.$request.setDefaultBank(id).then(data => {
          for (let i = 0; i < this.bankList.data.length; i++) {
            if (this.bankList.data[i].mb_id === id) {
              this.bankList.data[i].is_default = '1'
            } else {
              this.bankList.data[i].is_default = '0'
            }
          }
        })
      },
      delBank(id) {
        MessageBox.confirm(`你确定要删除吗?`).then(action => {
          this.$request.deleteBank(id).then(data => {
            this.$toast('删除成功')
            window.location.reload(true)
          }).catch(e => {
            console.error('删除银行卡失败', e)
            this.$toast('删除失败:' + e.msg)
          })
        }).catch(() => {
        })
      },
      editBank(id) {
        this.$router.push({name: 'member-bankedit', params: {id: id}})
      },
      gotoBankadd() {
        this.$router.push({name: 'member-bankadd'})
      }
    }
  }
</script>
